<template>
  <el-dialog
    title="注销"
    :visible.sync="visible"
    width="950px"
    :show-close="false"
    :before-close="close"
  >
    <el-form
      ref="myForm"
      class="logoff-action"
      inline
      :model="logoffParams"
      :rules="logoffRules"
      v-show="!isPrint"
    >
      <!--startprint-->
      <div id="print">
        <el-form-item class="input-item" label="注销类别：" prop="rkglzxlbdm">
          <el-select
            placeholder="请选择"
            v-model="logoffParams.rkglzxlbdm"
            :validate-event="false"
          >
            <el-option
              v-for="item in zxlbOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="input-item" label="去往国家：" prop="qwdGjhdqdm">
          <el-select
            placeholder="请选择"
            v-model="logoffParams.qwdGjhdqdm"
            :validate-event="false"
          >
            <el-option
              v-for="item in gjOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="input-item" label="审批人：" prop="spr">
          <el-input placeholder="请输入" v-model="logoffParams.spr"></el-input>
        </el-form-item>
        <el-form-item
          class="input-item addr-content"
          label="去往地址："
          prop="_qwdSsxqdm"
        >
          <el-input
            @click.native="openQwd"
            readonly
            placeholder="请选择"
            v-model="logoffParams._qwdSsxqdm"
          ></el-input>
        </el-form-item>
        <el-form-item class="input-item long-content" prop="qwdQhnxxdz">
          <el-input
            placeholder="请输入"
            v-model="logoffParams.qwdQhnxxdz"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="input-item area-content"
          label="情况说明："
          prop="bz"
        >
          <el-input
            type="textarea"
            placeholder="请输入"
            v-model="logoffParams.bz"
          ></el-input>
        </el-form-item>
      </div>
      <!--endprint-->
      <el-checkbox
        style="margin-left: 232px;margin-top: 60px"
        :value="logoffPrintParams.sfsb"
        >注销成功上报该数据</el-checkbox
      >
      <div class="form-button-box">
        <el-form-item class="input-item">
          <el-button class="form-btn outline" @click="logoffHanlde"
            >注销</el-button
          >
          <el-button class="form-btn" @click="logoffPrintHandle"
            >注销并打印凭证</el-button
          >
          <el-button class="form-btn outline" @click="closeHandle"
            >取消</el-button
          >

          <el-button class="form-btn outline" style="display: none;" ref="print" v-print="'#printCard'">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 去往地址 -->
    <my-address
      :visible="qwdVisible"
      :isEmpty="qwdIsEmpty"
      @cancel="cancelQwd"
      @submit="getQwdDetail"
    ></my-address>

    <!-- 打印部分 -->
    <div class="print-paper" id="printCard" v-show="isPrint">
      <div class="print-wrapper top">
        <h1>西藏自治区居住登记卡注销意愿单</h1>
        <p class="print-item">姓名：{{info.xm}}</p>
        <p class="print-item">居住登记卡签发机关：{{info.sjgsdwmc}}</p>
        <p class="print-item">居住登记卡签发时间：{{info.djkQfrq}}</p>
        <p class="print-item">公民身份证号码：{{info.sfzh}}</p>
        <p class="print-item">请核对以上内容，确认无误后签名。</p>
        <p class="print-item" style="line-height: 3;">签名：</p>
        <p class="print-item" style="line-height: 4;">注销单位名称（盖章）：</p>
      </div>
      <div class="print-line"></div>
      <div class="print-wrapper bottom">
        <h1>西藏自治区居住登记卡注销意愿单</h1>
        <p class="print-item">姓名：{{info.xm}}</p>
        <p class="print-item">居住登记卡签发机关：{{info.sjgsdwmc}}</p>
        <p class="print-item">居住登记卡签发时间：{{info.djkQfrq}}</p>
        <p class="print-item">公民身份证号码：{{info.sfzh}}</p>
        <p class="print-item">请核对以上内容，确认无误后签名。</p>
        <p class="print-item" style="line-height: 3;">签名：</p>
        <p class="print-item" style="line-height: 4;">注销单位名称（盖章）：</p>
      </div>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import MyAddress from '@/components/my-address'
import { getStore } from '@/utils/storage'
export default {
  name: 'logoffAction',
  components: {
    MyAddress
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rkbm: {
      type: String,
      default: ''
    },
    cardNum: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      checked: '',
      qwdVisible: false,
      qwdIsEmpty: false,
      zxlbOptions: [],
      gjOptions: [],
      logoffParams: {
        rkglzxlbdm: '',
        qwdGjhdqdm: '',
        qwdSsxqdm: '',
        _qwdSsxqdm: '',
        qwdQhnxxdz: '',
        spr: '',
        bz: '',
        rkbm: '',
        gmsfhm: ''
      },
      logoffRules: {
        rkglzxlbdm: [
          { required: true, message: '请选择注销类别' }
        ],
        spr: [
          { required: true, message: '请输入审批人' }
        ]
      },
      logoffPrintParams: {
        // ywlsh: '',
        sfsb: true
      },
      isPrint: false,
      info: {}
    }
  },
  created () {
    this.logoffParams.rkbm = this.rkbm
    this.logoffParams.gmsfhm = this.cardNum
    // this.logoffPrintParams.ywlsh = this.id
    this.zxlbOptions = JSON.parse(getStore('dictionary')).RKGLZXLB
    this.gjOptions = JSON.parse(getStore('dictionary')).GJDQ
    if (this.cardNum) {
      this.getPersonInfo(this.cardNum)
    }
  },
  methods: {
    close () {
      this.$emit('close', false)
    },
    // 去往地住址
    openQwd () {
      this.qwdVisible = true
      this.qwdIsEmpty = false
    },
    cancelQwd () {
      this.qwdVisible = false
      this.qwdIsEmpty = true
    },
    // 去往地住址
    getQwdDetail (detail, code) {
      this.logoffParams.qwdSsxqdm = code[code.length - 1]
      this.logoffParams._qwdSsxqdm = detail.join('')
      this.qwdVisible = false
      this.qwdIsEmpty = true
    },
    // 注销
    logoffHanlde () {
      let params = JSON.parse(JSON.stringify(this.logoffParams))
      delete params._qwdSsxqdm
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.logoffFunc(params, false)
        }
      })
    },
    async logoffFunc (params, isPrint) {
      let res = await this.$http(this.$api.logoff, params)
      if (res.code === 200) {
        this.$message({
          message: '注销成功',
          type: 'success',
          customClass: 'zZindex',
          duration: 5000
        })
        if (isPrint) {
          this.isPrint = true
          this.$refs.print.$el.click()
        }
        setTimeout(() => {
          if (isPrint) {
            this.isPrint = false
            this.$emit('submit', false)
          } else {
            this.$emit('close', false)
          }
        }, 1000)
      }
    },
    // 注销打印
    logoffPrintHandle () {
      let params = JSON.parse(JSON.stringify(this.logoffParams))
      delete params._qwdSsxqdm
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.logoffFunc(params, true)
        }
      })
    },
    // 关闭
    closeHandle () {
      this.$emit('close', false)
    },
    // 获取人员信息
    async getPersonInfo (val) {
      let res = await this.$http(this.$api.getPersonInfoFy, { gmsfhm: val })
      if (res.code === 200) {
        if (!res.data) {
          console.error('登记卡信息查询失败')
          return
        }
        let d = res.data
        this.info = {
          sfzh: d.gmsfhm, // 身份证号码
          xm: d.xm,
          djkQfrq: this.formatBirth(d.djkQfrq),
          sjgsdwmc: d.sjgsdwmc
        }
      }
    },
    formatBirth (val) {
      return val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .logoff-action {
  .input-item {
    margin: 0 0 20px 0;
    .el-form-item__label {
      height: 30px;
      line-height: 30px;
      width: 95px;
      padding-right: 0;
    }
    &.long-label {
      .el-form-item__label {
        width: 130px;
      }
    }
    .el-form-item__content {
      line-height: 30px;
      .el-input {
        .el-input__inner {
          width: 200px;
          height: 30px;
        }
      }
      .el-date-editor.el-input {
        width: 190px;
      }
      .el-input__icon {
        line-height: 30px;
      }
    }
    &.long-content {
      margin-left: 15px;
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            width: 390px;
          }
        }
      }
    }
    &.addr-content {
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            width: 390px;
          }
        }
      }
    }
    &.area-content {
      .el-form-item__content {
        .el-textarea {
          .el-textarea__inner {
            width: 799px;
          }
        }
      }
    }
  }
  .form-button-box {
    padding-top: 15px;
    text-align: center;
    .input-item {
      .form-btn {
        padding: 0;
        width: 140px;
        height: 40px;
        line-height: 38px;
        border-radius: 0;
        border: 1px solid #02579a;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        background: #02579a;
        margin-left: 20px;
        &.outline {
          color: #02579a;
          background: #fff;
        }
      }
    }
  }
}
/deep/ .el-dialog__body {
  height: 310px;
  overflow: hidden;
}
</style>
<style lang="scss">
  @page{
    size: auto A4 landscape;
    margin: 3mm;
  }
  .print-wrapper {
    width: 950px;
    &.top {
      padding-top: 150px;
    }
    h1 {
      text-align: center;
      font-size: 36px;
      font-weight: 300;
      margin-bottom: 50px;
      margin-top: 30px;
      padding-left: 10%;
    }
    p {
      font-size: 20px;
      line-height: 2;
      padding-left: 280px;
    }
  }
  .print-line {
    margin: 100px 0 200px;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #606266;
  }
</style>
